<template>
    <div class="home-swiper">
        <van-search v-model="value" placeholder="请输入搜索关键词" 
        input-align="center" @focus="onFocus" @search="onSearch"/>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
              <!-- <img :src="item.picUrl" alt=""> -->
              <van-image :src="item.picUrl" lazy-load radius="20px"/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { Toast ,} from 'vant'
//import axios from "axios"
export default {
  data() {
    return {
      value: '',
      bannerData: []
    };
  },
  methods:{
    //写一个完成网络请求的方法
    getBanner(){
      // axios
      //   .get('/api/recommend/banner')
      //   .then((response) => {
      //     //成功
      //     console.log(response.data);
      //     let resData = response.data;//获取到响应结果的数据
      //     if(resData.result == 100){
      //       this.bannerData = resData.data
      //     }
      //   })
      //   .catch(function(error){
      //     //失败
      //     console.log(error);
      //   });
      this.$request('get','/recommend/banner')
      .then(res =>{
        console.log(res)
        if(res.result == 100){
          this.bannerData = res.data
        }
      })
        
    },
    onFocus(){
        Toast("触发获得焦点事件")
    },
    onSearch(val){
        Toast(val)
    },
  },
  created(){
    this.getBanner();//调用网络请求的方法，获取数据
  }
  // mounted(){
  //   this.getBanner();
  // },
};
</script>

<style scoped>
  /* .my-swipe .van-swipe-item img{
    width: 100%;
  } */
</style>